<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>学历信息</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin: 20px;">
  <el-table :data="education">
    <el-table-column label="全日制学位" align="center" prop="fulldegree" />
    <el-table-column label="全日制毕业院校专业" align="center" prop="fulltimeprofession" />
    <el-table-column label="在职教育学历" align="center" prop="jobeducation" />
    <el-table-column label="在职毕业院校专业" align="center" prop="jobprofession" />
    <el-table-column label="在职学位" align="center" prop="jobdegree" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleUpdate(scope.row)">
          <el-icon><Edit /></el-icon>修改</el-button>
        <!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['education:education:remove']">删除</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  </div>
  <!-- 添加或修改学历信息对话框 -->
  <el-dialog :title="title" v-model="open" width="600px" append-to-body>
    <el-form ref="formAddRef" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="全日制学位" prop="fulldegree">
        <el-select
            v-model="form.fulldegree"
            placeholder="全日制学位"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="全日制毕业院校专业" prop="fulltimeprofession">
        <el-input v-model="form.fulltimeprofession" placeholder="请输入全日制毕业院校专业" />
      </el-form-item>
      <el-form-item label="在职教育学历" prop="jobeducation">
        <el-input v-model="form.jobeducation" placeholder="请输入在职教育学历" />
      </el-form-item>
      <el-form-item label="在职毕业院校专业" prop="jobprofession">
        <el-input v-model="form.jobprofession" placeholder="请输入在职毕业院校专业" />
      </el-form-item>
      <el-form-item label="在职学位" prop="jobdegree">
        <el-select
            v-model="form.jobdegree"
            placeholder="在职学位"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ArrowRight,Edit} from "@element-plus/icons-vue";
import request from '@/utils/mine'
import {ref,reactive,onMounted} from "vue";
import {ElMessage} from "element-plus";
const education = ref([]);
const title = ref("");
/*const formAddRef = ref()*/
const open = ref(false)
const userInfo = reactive({
  'username' :null
})
const type = [
  {label : '学士' , value : 1}
  ,{label : '硕士' , value : 2}
  ,{label : '博士' , value : 3}
  ,{label : '无' , value : 4}
]
const form=ref({
  id: null,
  number: userInfo.username,
  fulldegree: null,
  fulltimeprofession: null,
  jobeducation: null,
  jobprofession: null,
  jobdegree: null
})
/*const form = reactive({...formAddData})*/
onMounted(()=>{
  // 从SessionStorage取出数据
  let userstr = sessionStorage.getItem('loginUser')

  userInfo.username = JSON.parse(userstr).username

  getList();
})
const getList=()=>{
  request({
    url:'/information/edulist',
    method:'GET',
    params:{
      number:userInfo.username
    }
  }).then((req)=>{
    education.value=req.data;
  })
}

/** 新增按钮操作 */
function handleAdd() {
  open.value = true;
  title.value = "添加学历信息";
}

/** 修改按钮操作 */
const handleUpdate=(row)=> {
  open.value=true
  request({
    url:'/information/selectById',
    method:'GET',
    params:{
      id:row.id
    }
  }).then((req)=>{
    console.log(req.data+"____________")
    form.value=req.data
  })
}

// 取消按钮
function cancel() {
  open.value = false;
}
/** 提交按钮 */
function submitForm() {
  request({
    url:'/information/update',
    method:'PUT',
    params:form.value
  }).then((req)=>{
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: '修改成功',
      });
      open.value=false
      getList()
    } else {
      ElMessage({
        type: 'info',
        message: '修改失败',
      });
    }
  })
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>